<template>
  <div>
    <HeaderNav :title="$t('m.headernav.FORGETPASS')"  :showBack="true" />
    <div class="login_container">
      <div class="login_input_container" v-if='!flag'>
        <img src="../assets/img/user.png" class="login_input_img" />
        <input type="text" :placeholder="$t('m.msg.MSG20')" v-model='username' class="login_input" />
      </div>
      <div v-if='!flag' class='text'>({{$t('m.msg.MSG90')}})</div>
      <div v-if='!flag && errMsg' class='text' style='color:red'>{{$t('m.msg.MSG92')}}：{{errMsg}}</div>
      <div class="login_input_container" v-if='flag'>
        <img src="../assets/img/password.png" class="login_input_img" />
        <input type="text" :placeholder="$t('m.msg.MSG91')" v-model='formData.code' class="login_input" />
      </div>
      <div class="login_input_container" v-if='flag'>
        <img src="../assets/img/password.png" class="login_input_img" />
        <input type="password" :placeholder="$t('m.msg.MSG21')" v-model='formData.password' class="login_input" />
      </div>
	    <div class="login_input_container" v-if='flag'>
        <img src="../assets/img/password.png" class="login_input_img" />
        <input type="password" :placeholder="$t('m.msg.MSG22')" v-model='formData.repassword' class="login_input" />
      </div>
      <div class="login_btn" v-if='!flag' @click='sendCode()'>{{$t('m.msg.MSG93')}}</div>
      <div class="register_link" v-if='flag' @click='flag = false'>{{$t('m.msg.MSG94')}}</div>
      <div class="login_btn" v-if='flag'  @click='changePass()'>{{$t('m.headernav.UPDPASSWORD')}}</div>
    </div>
  </div>
</template>

<script>
import HeaderNav from '@/components/HeaderNav.vue'
import {postQuery2, getQuery} from '@/api/query';
export default {
  name: 'forgetPass',
  components: {

    HeaderNav
  },
  data() {
    return {
      flag: false,
      username: '',
      formData: {
        code: '',
        password: '',
        repassword: ''
      },
      errMsg: ''
      
    }
  },
  methods: {
    sendCode(){
     let that = this;
     if(!that.username){
        that.$toast.fail(that.$i18n.t('m.msg.MSG26'));
        return
      }
      let params = {
        userName: that.username
      }
      getQuery('/member/retrievePassword', params)
        .then (res => {
          if(res.code == 200){
            that.$toast.success(that.$i18n.t('m.msg.MSG89'));
            that.flag = true
            that.errMsg = '';
          }else{
            // alert(res.msg);
            that.errMsg = res.msg;
          }
      })
   },

   changePass(){
     let that = this;
     if(!that.formData.code){
        that.$toast.fail(that.$i18n.t('m.msg.MSG88'));
        return
      }
     if(!that.formData.password || !that.formData.repassword){
        that.$toast.fail(that.$i18n.t('m.msg.MSG27'));
        return
      }
      if(that.formData.password != that.formData.repassword){
        that.$toast.fail(that.$i18n.t('m.msg.MSG32'));
        return
      }
     let params = {
       code: that.formData.code,
       password: that.formData.password
     }
     postQuery2('/member/retrievePassword', params)
        .then (res => {
          if(res.code == 200){
            that.$toast.success(that.$i18n.t('m.msg.MSG4'));
            that.$router.push({
              path:'/login'  
            })
          }else{
            that.$toast.fail(res.msg);
          }
      })
   }
    
  },
  mounted () {
  },
}
</script>
<style scoped>
 
  .login_container{
    padding-top: 6vh;
  }

  .login_input_container{
    display: flex;
    align-items: center;
    width: 80vw;
    height: 90px;
    border-radius: 50px;
    margin-left: 10vw;
    margin-bottom: 2vh;
    border: 2px #a1a1a1 solid;
    background-color: #FCFCFC;
  }

  .login_input_img{
    height: 40px;
    width: 40px;
    margin: 0px 10px;
  }

  .login_input{
    width: 70%;
    border: none;
    background-color: #FCFCFC;
    zoom: 1.2;
  }

  .login_link_container{
    font-size: 32px;
    display: flex;
    width: 40vw;
    margin-left: 50vw;
    justify-content: space-between;

  }

  .login_link{
    color: #01D2FF;
  }

  .login_btn{
    height: 80px;
    width: 80vw;
    margin: 5vh 10vw;
    background-color: #01D2FF;
    color: white;
    font-size: 36px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .register_link{
    color: #01D2FF;
    font-size: 32px;
    margin-left: 10vw;
    margin-top: 20px;
  }

  .text{
    color: #a1a1a1;
    font-size: 18px;
    width: 90vw;
    padding: 0 5vw 20px 5vw;

  }
</style>
